<template>
 <!-- //搜索页 -->
    <!-- 1.搜索历史 -->
    <!-- 2.联想建议 -->
    <!-- 3.搜索结果  -->
  <div class="search-result">
    <!-- 搜索框 -->
    <form action="/" class="searchIpt">
        <van-search
            v-model="searchText"
            show-action
            placeholder="请输入搜索关键词"
            @search="onSearch"
            @cancel="onCancel"
            background="#3296fa"
            @focus=" resultStr= false"
        />
    </form>

    <div class="down">
    <!-- 搜索历史 -->
    <!-- 搜索为空并且没有执行搜索结果 -->
    <History
    v-if="!searchText&& !resultStr"
    :historyList="historyList"
    @search= 'onSearch'
    ></History>
    <!-- 搜索历史 -->

     <!-- 联想建议 -->
    <!-- 搜索框有内容并且没有执行搜索结果 -->
    <!-- 聚焦回到联想建议 -->
    <Suggestion
    :searchText = 'searchText'
    v-if="!resultStr && searchText"
     @search='onSearch'
    ></Suggestion>
    <!-- 联想建议 -->

    <!-- 搜索结果 -->
    <!-- 搜索结果有内容 -->
    <!-- 敲回车到搜索结果 -->
    <Result
     v-else-if="resultStr"
     :searchText='searchText'
    ></Result>
    <!-- 搜索结果 -->
    </div>

  </div>
</template>
    <!--  // 封装展示不同类型的组件思想
    // 1.先将所有的业务功能全部开发完成
    // 2.根据不同的条件,加上v-if来控制展示区域  -->

<script>
import { setItem } from '@/utils/storage'
import Result from './components/search-result'
import History from './components/search-history.vue'
import Suggestion from './components/search-suggestion'
export default {
  name: 'seatchIndex',
  data () {
    return {
      searchText: '', // 输入内容
      resultStr: false, // 搜索结果
      historyList: [] // 搜索历史
    }
  },
  methods: {
    // 搜索
    onSearch (val) {
      this.searchText = val // 输入的内容
      this.resultStr = true
      // 判断搜索数组中是否有该记录,有就删除重新添加在开头,没有就添加在开头
      const index = this.historyList.indexOf(val)
      //   if (index === -1) {
      //     this.historyList.unshift(val)
      //   } else {
      //     this.historyList.unshift(...(this.historyList.splice(index, 1)))
      //   }
      index === -1 ? this.historyList.unshift(val) : this.historyList.unshift(...(this.historyList.splice(index, 1)))
      // 存储到本地
      setItem('history', this.historyList || [])
      // console.log(this.historyList)
    },
    // 点击返回上一页
    onCancel () {
      this.$router.back()
    }
  },
  //   comments是组件的意思,注册组件用components
  components: {
    Result,
    History,
    Suggestion
  }
}
</script>

<style scoped lang="less">
  /deep/.searchIpt{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 2;

    }

  /deep/.van-search__action {
    color: #fff;
    z-index: 2;
  }
  /deep/.down{
        padding-top:112px
    }
</style>
